<template>
  <div class="container">
    <!--顶部图表-->
    <div class="topChart">
      <div class="topChartLeft">
        <div class="topTitle">
          <i class="el-icon-s-data"></i>
          &nbsp;10种典型农产品最新价格榜
        </div>
        <!--两个按钮-->
        <div class="topSelect">
          <div class="select_left">
            <el-button class="select_buttom" :class="{active: isChose}" @click="lowPriceClickEvent">
              <i class="el-icon-caret-bottom"></i>
              最低价市场排名
            </el-button>
          </div>
          <div class="select_right">
            <el-button class="select_buttom" :class="{active: !isChose}" @click="hightPriceClickEvent">
              <i class="el-icon-caret-top"></i>
              最高价市场排名
            </el-button>
          </div>
        </div>
        <!--表格内容-->
        <div class="bottomChart">
          <TypicalProductEchartComponent :typicalComponentMessage="typicalComponentMessage"/>
        </div>
      </div>
      <div class="topChartRight">
        <div class="topTitle">
          <i class="el-icon-s-marketing"></i>
          &nbsp;农产品涨跌幅排名
        </div>
        <!--两个按钮-->
        <div class="topSelect">
          <div class="select_left">
            <el-button class="select_buttom" :class="{active: isClick}" @click="lowRankingClickEvent">
              <i class="el-icon-sort-down"></i>
              跌幅排名
            </el-button>
          </div>
          <div class="select_right">
            <el-button class="select_buttom" :class="{active: !isClick}" @click="hightRankingClickEvent">
              <i class="el-icon-sort-up"></i>
              涨幅排名
            </el-button>
          </div>
        </div>
        <!--表格内容-->
        <div class="bottomChart">
            <UpsAndDownsRankingComponent :upAndDownMessage="upAndDownMessage"/>
          </div>
      </div>
    </div>
    <!--最新报价（表格形式）-->
    <div class="centerTable">
      <div class="topCenterTitle">
        <i class="el-icon-s-claim"></i>
          &nbsp;最 新 报 价
      </div>
      <div style="width: 100%; height: 350px;"> 
        <NewsPriceHome/>
      </div>
    </div>
    <!--底部新闻资讯和报告-->
    <div class="bottomInfo">
      <div class="bottomInfoLeft">
        <div class="topTitleMore">
          <el-row :gutter="20">
            <el-col :span="8"  style="font-weight: bold; font-size: 20px;">
              <i class="el-icon-document-copy"  style="font-weight: bold;"></i>
                  &nbsp;新闻资讯
            </el-col>
            <el-col :span="4" :offset="10" class="to_more">
              <el-button plain class="to_more_button"  @click="toMoreNews">
                查看更多
                <i class="el-icon-d-arrow-right" style="font-weight: bold;"></i>
              </el-button>
            </el-col>
          </el-row>
        </div>
        <!--表格内容-->
        <div style="width: 100%; height: 540px;">
          <NewsInfo/>
        </div>
      </div>
      <div class="bottomInfoRight">
        <div class="topTitleMore">
          <el-row :gutter="20">
            <el-col :span="8"  style="font-weight: bold; font-size: 20px;">
              <i class="el-icon-document"  style="font-weight: bold;"></i>
                  &nbsp;分析报告
            </el-col>
            <el-col :span="4" :offset="10" class="to_more">
              <el-button plain class="to_more_button"  @click="toMoreReport">
                查看更多
                <i class="el-icon-d-arrow-right" style="font-weight: bold;"></i>
              </el-button>
            </el-col>
          </el-row>
        </div>
        <!--表格内容-->
        <div style="width: 100%; height: 540px;">
          <ReportInfo/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypicalProductEchartComponent from '@/components/home/echarts/TypicalProductEchartComponent'
import UpsAndDownsRankingComponent from '@/components/home/echarts/UpsAndDownsRankingComponent'
import NewsPriceHome from '@/components/home/NewsPriceHome'
import NewsInfo from '@/components/home/NewsInfo'
import ReportInfo from '@/components/home/ReportInfo'
export default {
  components: {TypicalProductEchartComponent, UpsAndDownsRankingComponent,
    NewsPriceHome, NewsInfo, ReportInfo },
  data() {
    return {
      // 通过点击改变button颜色
      isChose: true,
      isClick: true,
      // 0表示获取最低价格排名，1表示获取最高价格排名
      typicalComponentMessage : 0,
      // 0表示获取跌幅排名，1表示获取涨幅排名
      upAndDownMessage: 0,
    }
  },
  methods: {
    lowPriceClickEvent() {
      this.isChose = true
      this.typicalComponentMessage = 0
    },
    hightPriceClickEvent() {
      this.isChose = false
      this.typicalComponentMessage = 1
    },
    lowRankingClickEvent() {
      this.isClick = true
      this.upAndDownMessage = 0
    },
    hightRankingClickEvent() {
      this.isClick = false
      this.upAndDownMessage = 1
    },
    toMoreNews() {
      this.$router.push('/news')
    },
    toMoreReport() {
      console.log('查看更多分析报告')
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 40px 70px;
}
.topChart {
  width: 100%;
  height: 630px;
  display: flex;
  justify-content: space-between; /* 左右两边对齐，中间均匀分配空白空间 */
  .topChartLeft, .topChartRight{
    flex: 1; /* 让两个子元素等分flex容器的空间 */
    padding: 5px 20px;
    border: 2px solid green;
    border-radius: 20px;
  }
  .topChartLeft {
    margin: 0 30px 0 0; /* 上 右 下 左 */
  }
  .topChartRight {
    margin: 0 0 0 30px; /* 上 右 下 左 */
  }
}
.centerTable {
  width: 100%;
  height: 400px;
  margin: 40px 0;
  border: 2px solid green;
  border-radius: 20px;
}

.bottomInfo {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: space-between; /* 左右两边对齐，中间均匀分配空白空间 */
  .bottomInfoLeft, .bottomInfoRight{
    flex: 1; /* 让两个子元素等分flex容器的空间 */
    padding: 5px 20px;
    border: 2px solid green;
    border-radius: 20px;
  }
  .bottomInfoLeft {
    margin: 0 30px 0 0; /* 上 右 下 左 */
  }
  .bottomInfoRight {
    margin: 0 0 0 30px; /* 上 右 下 左 */
  }
}
.topTitle {
  width: 100%;
  height: 40px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直方向上居中 */
  font-size: 20px;
  font-weight: bold;
  // background-color: aqua;
}
.to_more :hover{
  cursor:pointer;
}

.to_more_button {
  border: none;
  background-color: none;
}
.topSelect {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between; /* 左右两边对齐，中间均匀分配空白空间 */
  // background-color: aqua;
  .select_left, .select_right {
    flex: 1; /* 让两个子元素等分flex容器的空间 */
  }
}
.select_buttom {
  width: 100%;
  background-color: 	#fcfbfb;
  font-size: 17px;
  font-weight: bold;
  border-radius: 10px;
}
.bottomChart {
  width: 100%;
  height: calc(100% - 80px);
  margin-top: 5px;
}
.topCenterTitle {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
button:hover {
  background: #2adbb8;
  background-color: #2adbb8;
  color: #000;
  cursor: pointer;
}
button.active {
  background-color: #2abc9c;
  color: #000;
}

</style>